<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>红包中心 - 筛选查询</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --red-primary: #E63946;
      --red-light: #FFE5E7;
      --red-dark: #C1121F;
      --gold: #FFD700;
      --gold-light: #FFF3CD;
      --gray: #6C757D;
      --light-bg: #F8F9FA;
      --white: #FFFFFF;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light-bg);
      color: #333;
      padding-top: 56px;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--red-primary);
      color: white;
      box-shadow: 0 2px 10px rgba(230, 57, 70, 0.3);
    }
    
    .navbar-brand, .nav-link {
      color: white !important;
    }
    
    .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.3);
    }
    
    /* 筛选区域 */
    .filter-section {
      background-color: var(--white);
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .search-box {
      position: relative;
      margin-bottom: 15px;
    }
    
    .search-box input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #ddd;
      font-size: 14px;
    }
    
    .search-box i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray);
    }
    
    .filter-actions {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }
    
    .filter-btn {
      flex: 1;
      padding: 8px 0;
      background-color: var(--white);
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #333;
    }
    
    .filter-btn.active {
      border-color: var(--red-primary);
      color: var(--red-primary);
      background-color: var(--red-light);
    }
    
    /* 高级筛选面板 */
    .advanced-filter {
      background-color: var(--white);
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: none;
    }
    
    .advanced-filter.show {
      display: block;
    }
    
    .filter-group {
      margin-bottom: 15px;
    }
    
    .filter-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #555;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-option {
      padding: 5px 12px;
      border: 1px solid #ddd;
      border-radius: 16px;
      font-size: 13px;
      cursor: pointer;
    }
    
    .filter-option.active {
      background-color: var(--red-primary);
      color: white;
      border-color: var(--red-primary);
    }
    
    .filter-confirm {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .filter-confirm button {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      font-size: 14px;
    }
    
    .btn-reset {
      background-color: var(--white);
      border: 1px solid #ddd;
    }
    
    .btn-apply {
      background-color: var(--red-primary);
      color: white;
      border: none;
    }
    
    /* 红包分类导航 */
    .redpack-tabs {
      display: flex;
      background-color: var(--white);
      border-bottom: 1px solid #eee;
      overflow-x: auto;
    }
    
    .redpack-tab {
      flex: 1;
      padding: 12px 0;
      text-align: center;
      color: var(--gray);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      position: relative;
    }
    
    .redpack-tab.active {
      color: var(--red-primary);
    }
    
    .redpack-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: var(--red-primary);
    }
    
    /* 红包列表容器 */
    .redpack-container {
      padding: 15px;
    }
    
    .redpack-list {
      display: none;
    }
    
    .redpack-list.active {
      display: block;
    }
    
    /* 红包通用样式 */
    .redpack-item {
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s;
    }
    
    .redpack-item:hover {
      transform: translateY(-2px);
    }
    
    .redpack-header {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .redpack-sender {
      display: flex;
      align-items: center;
    }
    
    .sender-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
    
    .sender-name {
      font-weight: 500;
      font-size: 15px;
    }
    
    .redpack-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    /* 红包类型样式 */
    .normal-redpack {
      background: linear-gradient(135deg, #FF5252, var(--red-primary));
      color: white;
    }
    
    .normal-redpack .redpack-body {
      display: flex;
      align-items: center;
      padding: 15px;
    }
    
    .redpack-amount {
      font-size: 24px;
      font-weight: 700;
      margin-right: 15px;
    }
    
    .redpack-desc {
      flex: 1;
    }
    
    .redpack-title {
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .redpack-info {
      font-size: 13px;
      opacity: 0.9;
    }
    
    .redpack-open {
      text-align: center;
      padding: 10px 0;
      background-color: rgba(255, 255, 255, 0.2);
      font-weight: 500;
      cursor: pointer;
    }
    
    .received-redpack .redpack-body {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .received-icon {
      color: var(--red-primary);
      font-size: 24px;
      margin-right: 12px;
    }
    
    .received-info {
      flex: 1;
    }
    
    .received-title {
      font-weight: 500;
      margin-bottom: 3px;
    }
    
    .received-desc {
      font-size: 13px;
      color: var(--gray);
    }
    
    .received-amount {
      font-weight: 700;
      color: var(--red-primary);
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--gray);
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item i {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .nav-item.active {
      color: var(--red-primary);
    }
    
    /* 空状态 */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--gray);
    }
    
    .empty-state i {
      font-size: 60px;
      margin-bottom: 15px;
      color: #eee;
    }
    
    /* 动画效果 */
    @keyframes shake {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-5deg); }
      75% { transform: rotate(5deg); }
    }
    
    .redpack-item.unopened:hover .normal-redpack {
      animation: shake 0.5s ease-in-out infinite;
    }
    
    /* 筛选标签 */
    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 15px;
      background-color: var(--white);
      border-bottom: 1px solid #eee;
      display: none;
    }
    
    .filter-tags.show {
      display: flex;
    }
    
    .filter-tag {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      background-color: var(--red-light);
      color: var(--red-primary);
      border-radius: 15px;
      font-size: 12px;
      gap: 5px;
    }
    
    .filter-tag i {
      cursor: pointer;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-light fixed-top">
    <div class="container px-3">
      <a class="navbar-brand" href="#">
        <i class="fa fa-envelope-o me-1"></i>红包中心
      </a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fa fa-cog"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 筛选区域 -->
  <div class="filter-section">
    <div class="search-box">
      <i class="fa fa-search"></i>
      <input type="text" placeholder="搜索红包（输入发送者或内容）">
    </div>
    
    <div class="filter-actions">
      <button class="filter-btn" id="filter-date">
        <i class="fa fa-calendar"></i>
        <span>日期</span>
      </button>
      <button class="filter-btn" id="filter-amount">
        <i class="fa fa-rmb"></i>
        <span>金额</span>
      </button>
      <button class="filter-btn" id="filter-type">
        <i class="fa fa-tags"></i>
        <span>类型</span>
      </button>
      <button class="filter-btn" id="filter-advanced">
        <i class="fa fa-sliders"></i>
        <span>更多</span>
      </button>
    </div>
  </div>
  
  <!-- 筛选标签 -->
  <div class="filter-tags" id="active-filters">
    <!-- 筛选标签会动态添加到这里 -->
  </div>
  
  <!-- 高级筛选面板 -->
  <div class="advanced-filter" id="advanced-filter-panel">
    <div class="filter-group">
      <div class="filter-title">来源</div>
      <div class="filter-options">
        <div class="filter-option">全部</div>
        <div class="filter-option">好友</div>
        <div class="filter-option">群组</div>
        <div class="filter-option">官方活动</div>
        <div class="filter-option">系统奖励</div>
      </div>
    </div>
    
    <div class="filter-group">
      <div class="filter-title">状态</div>
      <div class="filter-options">
        <div class="filter-option">全部</div>
        <div class="filter-option">未领取</div>
        <div class="filter-option">已领取</div>
        <div class="filter-option">已过期</div>
      </div>
    </div>
    
    <div class="filter-group">
      <div class="filter-title">节日/活动</div>
      <div class="filter-options">
        <div class="filter-option">日常</div>
        <div class="filter-option">春节</div>
        <div class="filter-option">生日</div>
        <div class="filter-option">节日</div>
        <div class="filter-option">活动奖励</div>
      </div>
    </div>
    
    <div class="filter-confirm">
      <button class="btn-reset">重置</button>
      <button class="btn-apply">应用筛选</button>
    </div>
  </div>
  
  <!-- 红包分类导航 -->
  <div class="redpack-tabs">
    <a href="#" class="redpack-tab active" data-tab="all">全部</a>
    <a href="#" class="redpack-tab" data-tab="unopened">未领取</a>
    <a href="#" class="redpack-tab" data-tab="received">已领取</a>
    <a href="#" class="redpack-tab" data-tab="task">任务红包</a>
  </div>
  
  <!-- 红包列表容器 -->
  <div class="redpack-container">
    <!-- 全部红包列表 -->
    <div class="redpack-list active" id="all">
      <div class="redpack-item unopened">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=1" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">公司年会红包</div>
            </div>
          </div>
          <div class="redpack-time">今天 10:30</div>
        </div>
        <div class="normal-redpack">
          <div class="redpack-body">
            <div class="redpack-amount">¥随机</div>
            <div class="redpack-desc">
              <div class="redpack-title">恭喜发财，大吉大利！</div>
              <div class="redpack-info">公司年度福利红包，人人有份</div>
            </div>
          </div>
          <div class="redpack-open">点击领取</div>
        </div>
      </div>
      
      <div class="redpack-item received-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=30" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">春节红包</div>
            </div>
          </div>
          <div class="redpack-time">3天前</div>
        </div>
        <div class="redpack-body">
          <div class="received-icon">
            <i class="fa fa-openid"></i>
          </div>
          <div class="received-info">
            <div class="received-title">新年快乐，万事如意</div>
            <div class="received-desc">来自家族群的春节祝福红包</div>
          </div>
          <div class="received-amount">¥16.88</div>
        </div>
      </div>
      
      <div class="redpack-item unopened">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=3" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">小明</div>
            </div>
          </div>
          <div class="redpack-time">1周前</div>
        </div>
        <div class="normal-redpack">
          <div class="redpack-body">
            <div class="redpack-amount">¥随机</div>
            <div class="redpack-desc">
              <div class="redpack-title">生日红包，感谢祝福</div>
              <div class="redpack-info">感谢大家的生日祝福</div>
            </div>
          </div>
          <div class="redpack-open">点击领取</div>
        </div>
      </div>
      
      <div class="redpack-item received-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=31" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">同事小王</div>
            </div>
          </div>
          <div class="redpack-time">2周前</div>
        </div>
        <div class="redpack-body">
          <div class="received-icon">
            <i class="fa fa-openid"></i>
          </div>
          <div class="received-info">
            <div class="received-title">感谢帮忙</div>
            <div class="received-desc">感谢帮忙解决问题的小红包</div>
          </div>
          <div class="received-amount">¥8.88</div>
        </div>
      </div>
    </div>
    
    <!-- 其他红包列表（未领取、已领取、任务红包）结构类似，省略 -->
    <div class="redpack-list" id="unopened">
      <!-- 未领取红包内容 -->
    </div>
    
    <div class="redpack-list" id="received">
      <!-- 已领取红包内容 -->
    </div>
    
    <div class="redpack-list" id="task">
      <!-- 任务红包内容 -->
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-envelope-o"></i>
      <span>红包</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 红包分类切换
    const tabLinks = document.querySelectorAll('.redpack-tab');
    const tabContents = document.querySelectorAll('.redpack-list');
    
    tabLinks.forEach(tab => {
      tab.addEventListener('click', function(e) {
        e.preventDefault();
        
        tabLinks.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        tabContents.forEach(content => {
          content.classList.remove('active');
        });
        
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 高级筛选面板切换
    const advancedFilterBtn = document.getElementById('filter-advanced');
    const advancedFilterPanel = document.getElementById('advanced-filter-panel');
    
    advancedFilterBtn.addEventListener('click', function() {
      advancedFilterPanel.classList.toggle('show');
      this.classList.toggle('active');
    });
    
    // 筛选选项点击事件
    const filterOptions = document.querySelectorAll('.filter-option');
    filterOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 如果点击的是"全部"，则取消同组其他选项
        if (this.textContent === '全部') {
          const siblings = this.parentElement.querySelectorAll('.filter-option');
          siblings.forEach(sib => sib.classList.remove('active'));
          this.classList.add('active');
        } else {
          // 取消同组的"全部"选项
          const allOption = this.parentElement.querySelector('.filter-option:first-child');
          if (allOption.textContent === '全部') {
            allOption.classList.remove('active');
          }
          // 切换当前选项状态
          this.classList.toggle('active');
        }
      });
    });
    
    // 筛选按钮点击事件
    const filterButtons = document.querySelectorAll('.filter-btn:not(#filter-advanced)');
    const filterTagsContainer = document.getElementById('active-filters');
    
    // 日期筛选弹窗
    const dateFilterBtn = document.getElementById('filter-date');
    dateFilterBtn.addEventListener('click', function() {
      const dateOptions = ['今天', '昨天', '近7天', '近30天', '本月', '上月', '自定义'];
      const selected = prompt(`请选择日期范围:\n${dateOptions.join('\n')}`, '近7天');
      
      if (selected && dateOptions.includes(selected)) {
        addFilterTag('日期', selected);
        this.classList.add('active');
      }
    });
    
    // 金额筛选弹窗
    const amountFilterBtn = document.getElementById('filter-amount');
    amountFilterBtn.addEventListener('click', function() {
      const amountOptions = ['全部金额', '0-1元', '1-5元', '5-20元', '20-100元', '100元以上'];
      const selected = prompt(`请选择金额范围:\n${amountOptions.join('\n')}`, '全部金额');
      
      if (selected && amountOptions.includes(selected)) {
        addFilterTag('金额', selected);
        this.classList.add('active');
      }
    });
    
    // 类型筛选弹窗
    const typeFilterBtn = document.getElementById('filter-type');
    typeFilterBtn.addEventListener('click', function() {
      const typeOptions = ['全部类型', '普通红包', '拼手气红包', '任务红包', '节日红包', '奖励红包'];
      const selected = prompt(`请选择红包类型:\n${typeOptions.join('\n')}`, '全部类型');
      
      if (selected && typeOptions.includes(selected)) {
        addFilterTag('类型', selected);
        this.classList.add('active');
      }
    });
    
    // 添加筛选标签
    function addFilterTag(type, value) {
      // 检查是否已有相同类型的标签，有则替换
      const existingTag = filterTagsContainer.querySelector(`[data-type="${type}"]`);
      if (existingTag) {
        existingTag.remove();
      }
      
      // 创建新标签
      const tag = document.createElement('div');
      tag.className = 'filter-tag';
      tag.dataset.type = type;
      tag.innerHTML = `
        <span>${type}: ${value}</span>
        <i class="fa fa-times" data-type="${type}"></i>
      `;
      
      filterTagsContainer.appendChild(tag);
      filterTagsContainer.classList.add('show');
      
      // 应用筛选
      applyFilters();
    }
    
    // 移除筛选标签
    filterTagsContainer.addEventListener('click', function(e) {
      if (e.target.tagName === 'I') {
        const type = e.target.getAttribute('data-type');
        const tag = e.target.closest('.filter-tag');
        tag.remove();
        
        // 移除对应筛选按钮的active状态
        if (type === '日期') dateFilterBtn.classList.remove('active');
        if (type === '金额') amountFilterBtn.classList.remove('active');
        if (type === '类型') typeFilterBtn.classList.remove('active');
        
        // 如果没有标签了，隐藏标签容器
        if (filterTagsContainer.children.length === 0) {
          filterTagsContainer.classList.remove('show');
        }
        
        // 重新应用筛选
        applyFilters();
      }
    });
    
    // 应用筛选按钮
    document.querySelector('.btn-apply').addEventListener('click', function() {
      const selectedOptions = document.querySelectorAll('.filter-option.active');
      selectedOptions.forEach(option => {
        const groupTitle = option.closest('.filter-group').querySelector('.filter-title').textContent;
        addFilterTag(groupTitle, option.textContent);
      });
      
      // 关闭高级筛选面板
      advancedFilterPanel.classList.remove('show');
      advancedFilterBtn.classList.remove('active');
    });
    
    // 重置筛选按钮
    document.querySelector('.btn-reset').addEventListener('click', function() {
      // 清除所有选中状态
      document.querySelectorAll('.filter-option.active').forEach(option => {
        option.classList.remove('active');
      });
      
      // 清除筛选标签
      filterTagsContainer.innerHTML = '';
      filterTagsContainer.classList.remove('show');
      
      // 清除筛选按钮状态
      filterButtons.forEach(btn => btn.classList.remove('active'));
      
      // 应用筛选
      applyFilters();
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-box input');
    searchInput.addEventListener('input', function() {
      applyFilters();
    });
    
    // 应用所有筛选条件
    function applyFilters() {
      // 获取所有活跃的筛选条件
      const activeFilters = {};
      document.querySelectorAll('.filter-tag').forEach(tag => {
        const type = tag.getAttribute('data-type');
        const value = tag.textContent.split(': ')[1];
        activeFilters[type] = value;
      });
      
      // 获取搜索关键词
      const searchTerm = searchInput.value.toLowerCase().trim();
      
      // 这里是筛选逻辑，实际应用中会根据筛选条件过滤红包列表
      console.log('应用筛选条件:', {
        filters: activeFilters,
        searchTerm: searchTerm
      });
      
      // 模拟筛选结果更新
      const allRedpacks = document.querySelectorAll('.redpack-item');
      allRedpacks.forEach(item => {
        // 实际应用中这里会有真实的筛选逻辑
        item.style.display = 'block';
      });
    }
    
    // 红包领取功能
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('redpack-open')) {
        const redpackItem = e.target.closest('.redpack-item');
        const senderName = redpackItem.querySelector('.sender-name').textContent;
        const randomAmount = (Math.random() * 9 + 1).toFixed(2);
        
        alert(`恭喜！你领取了${senderName}的红包 ¥${randomAmount}`);
      }
    });
  </script>
</body>
</html>
